<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* border:1px solid red;    */
        /* 三个小属性： 线宽度border-width  线型border-style  边框颜色border-style  */
        /* 线型：solid实线    dashed虚线  dotted点状线  */
        /*  提供小属性的目的是为了方便层叠大属性。 如果不准备层叠大属性，就不要把它拆成小属性。 */
        div.d1{
            width: 200px;
            padding: 20px;
            border: 5px solid #000;
            margin-bottom: 10px;
        }
        div.d2{
            width: 200px;
            padding: 20px;
            border: 5px dotted #000;
            margin-bottom: 10px;
        }
        div.d3{
            width: 200px;
            padding: 20px;
            border: 5px dashed #000;
            margin-bottom: 10px;
        }

        section {
            width: 20px;
            padding: 20px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
        section.spec{
            /* 小属性重叠的属性。 */
            border-color:red;
        }
    </style>
</head>
<body>
    <div class="d1">solid</div>
    <div class="d2">dotted</div>
    <div class="d3">dashed</div>

    <section></section>
    <section></section>
    <section></section>
    <section class="spec"></section>
    <section></section>
    <section></section>
    <section></section>
</body>
</html>